{{! This does go against no logic in templates but works very well }}

{{#each browsers}}
    <article class='browser-wrapper {{@key}}' id='{{@key}}'>

        <h2 class="centered"><a href='#{{@key}}'><span class='browserhacks-{{@key}}'></span> {{capitalizeFirst name}}</a></h2>

        {{! Get hacks for this browser }}

        {{#eachFilteredBrowser ../hacks @key}}

            {{! If current type (type) is different from type of last hack (../lasttype) display type heading }}

            {{#isnt type lasttype}}
                </section>
                <h3 class='centered' data-type='{{type}}-parent'>{{fromObj ../../../hackTypes type 'title'}}</h3>
                <section class='grid  centered' data-type='{{type}}-childs'>
            {{/isnt}}

            <div class='browser-wrapper__hack grid__col--50 ' id='hack-{{id}}' data-safe='{{safe}}' data-legacy='{{fromObj browsers @key 'legacy' }}' data-version='{{fromObj browsers @key 'version'}}'>
                <div class="hack">
                    {{#if label}}
                        <p class='browser-wrapper__label'>{{label}}</p>
                    {{/if}}
                    <pre class='language-{{language}}'><code>{{#each code}}{{this}}
{{/each}}</code></pre>
                    <ul class='hack-list'>
                        {{#each browsers}}
                            <li class='hack-list__item'>
                                <span class='browser-icon  browserhacks-{{@key}}'></span>
                                <span class='browser-name'>{{fromObj ../../../browsers @key 'name'}}</span>
                                <span class='browser-version'>{{fromObj ../browsers @key 'humanVersion'}}</span>
                            </li>
                        {{/each}}
                    </ul>
                    <ul class="hack-list  hack-list--options">
                        {{#ifCond language "css" }}
                            {{#if safe}}
                                <li class='hack-list__item'>
                                    <span class="browserhacks-valid"   title="Valid CSS"></span>
                                    <span class="browserhacks-css3"    title="Valid CSS"></span>
                                </li>
                            {{else}}
                                <li class='hack-list__item'>
                                    <span class="browserhacks-invalid" title="Invalid CSS: {{csslint}}"></span>
                                    <span class="browserhacks-css3"    title="Invalid CSS: {{csslint}}"></span>
                                </li>
                            {{/if}}
                        {{/ifCond}}

                        {{#ifCond language "javascript" }}
                            {{#if safe}}
                                <li class='hack-list__item'>
                                    <span class="browserhacks-valid"    title="Valid JS"></span>
                                    <span class="browserhacks-html5" title="Valid JS"></span>
                                </li>
                            {{else}}
                                <li class='hack-list__item'>
                                    <span class="browserhacks-invalid"  title="Invalid JS: {{jshint}}"></span>
                                    <span class="browserhacks-html5" title="Invalid JS: {{jshint}}"></span>
                                </li>
                            {{/if}}
                        {{/ifCond}}

                        <li class='hack-list__item  hack-id'><a href='#hack-{{id}}'>#</a></li>
                    </ul>
                </div>
            </div>

        {{/eachFilteredBrowser}}

    </article>
{{/each}}
